<template>
  <div class="bottomRight">
      <span class="title">最热门岗位前十名</span>
      <div class="scrollContainer2">
      <!--滚动项共10条-->
      <div class="scrollView2">
        <right-scroll
          v-for="(item, index) in sortArr"
          :key="index"
          :index="index"
          :name="item.name"
          :num="item.num"
        ></right-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import rightScroll from "./rightScroll.vue";
export default {
  name: "bottoRight",
  components: {
    rightScroll,
  },
  data() {
    return {
      arr: [
        { num: 10,name:'软件工程师' },
        { num: 40 ,name:'销售工程师'},
        { num: 20 ,name:'资讯工程师'},
        { num: 55 ,name:'财务专员'},
        { num: 10 ,name:'人力资源'},
        { num: 30 ,name:'电子工程师'},
        { num: 40 ,name:'设备维护员'},
        { num: 32 ,name:'市场专员'},
        { num: 80 ,name:'供应链管培生'},
        { num:15,name:'海外销售'}
      ],
      sortArr:[]
    };
  },
  mounted() {
    this.itemClick();
  },
  methods: {
    itemClick() {
      this.sortArr = this.arr.sort((a,b)=>{
        return b.num - a.num
      })
      let scrollContainer2 = document.getElementsByClassName("scrollContainer2")[0];
      let scrollView2 = document.getElementsByClassName("scrollView2")[0];
      //let scrollItem = document.getElementsByClassName('scrollItem')[0]

      let content = scrollView2.innerHTML;
      scrollView2.innerHTML = scrollView2.innerHTML + content;
      setInterval(moveUp, 2000);
      //定义方法,功能是使div中的内容可以向上滚动
      function moveUp() {
        
        if (scrollContainer2.scrollTop > (scrollView2.offsetHeight * 3) / 2) {
          scrollContainer2.scrollTop = 0;
        } else {
          scrollContainer2.scrollTop = scrollContainer2.scrollTop+58;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.bottomRight {
  position: absolute;
  right:0;
  bottom:10px;
  width: 27%;
  height:305px;
  background: url("../../../assets/数据屏/右3@2x.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  .title{
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translate(-50%,-50%);
    color: #fefffb;
    font-size: 15px;
  }
  .scrollContainer2 {
    position: absolute;
    width: 100%;
    height: 76%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -38%);
    overflow: hidden; //超出部分隐藏
    .scrollView2 {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
